/**
 * @class Ext.menu.CheckItem
 */

/**
 * @var {color}
 * Menu CheckItem text color
 */
$menucheckitem-color: dynamic(null);

/**
 * @var {color}
 * Menu CheckItem text color when active
 */
$menucheckitem-active-color: dynamic(null);

/**
 * @var {color}
 * Menu CheckItem text color when disabled
 */
$menucheckitem-disabled-color: dynamic(null);

/**
 * @var {color}
 * Menu CheckItem background-color
 */
$menucheckitem-background-color: dynamic(null);

/**
 * @var {color}
 * Menu CheckItem background-color when active
 */
$menucheckitem-active-background-color: dynamic(null);

/**
 * @var {color}
 * Menu CheckItem background-color when disabled
 */
$menucheckitem-disabled-background-color: dynamic(null);

/**
 * @var {string/number}
 * Menu CheckItem font-weight
 */
$menucheckitem-font-weight: dynamic(null);

/**
 * @var {number}
 * Menu CheckItem font-size
 */
$menucheckitem-font-size: dynamic(null);

/**
 * @var {number}
 * Menu CheckItem font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menucheckitem-font-size-big: dynamic(null);

/**
 * @var {string}
 * Menu CheckItem font-family
 */
$menucheckitem-font-family: dynamic(null);

/**
 * @var {number}
 * Menu CheckItem height
 */
$menucheckitem-height: dynamic(null);

/**
 * @var {number}
 * Menu CheckItem height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menucheckitem-height-big: dynamic(null);

/**
 * @var {string}
 * Menu CheckItem cursor
 */
$menucheckitem-cursor: dynamic(null);

/**
 * @var {string}
 * Menu CheckItem cursor when disabled
 */
$menucheckitem-disabled-cursor: dynamic(null);

/**
 * @var {number}
 * Menu item outline-width when focused
 */
$menucheckitem-focused-outline-width: dynamic(null);

/**
 * @var {string}
 * Menu item outline-style when focused
 */
$menucheckitem-focused-outline-style: dynamic(null);

/**
 * @var {color}
 * Menu item outline-color when focused
 */
$menucheckitem-focused-outline-color: dynamic(null);

/**
 * @var {color}
 * Menu item outline-offset when focused
 */
$menucheckitem-focused-outline-offset: dynamic(null);

/**
 * @var {number}
 * The opacity of disabled {@link Ext.menu.Item Menu CheckItems}
 */
$menucheckitem-disabled-opacity: dynamic(null);

/**
 * @var {color}
 * Menu CheckItem icon color
 */
$menucheckitem-icon-color: dynamic(null);

/**
 * @var {color}
 * Menu CheckItem icon color when active
 */
$menucheckitem-active-icon-color: dynamic(null);

/**
 * @var {color}
 * Menu CheckItem icon color when disabled
 */
$menucheckitem-disabled-icon-color: dynamic(null);

/**
 * @var {number}
 * Menu CheckItem icon size
 */
$menucheckitem-icon-size: dynamic(null);

/**
 * @var {number}
 * Menu CheckItem icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menucheckitem-icon-size-big: dynamic(null);

/**
 * @var {number}
 * Menu CheckItem icon font-size
 */
$menucheckitem-icon-font-size: dynamic(null);

/**
 * @var {number}
 * Menu CheckItem icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menucheckitem-icon-font-size-big: dynamic(null);

/**
 * @var {string}
 * Menu CheckItem arrow icon
 */
$menucheckitem-arrow-icon: dynamic(null);

/**
 * @var {color}
 * Menu CheckItem arrow icon color
 */
$menucheckitem-arrow-icon-color: dynamic($menucheckitem-icon-color);

/**
 * @var {color}
 * Menu CheckItem arrow icon color when active
 */
$menucheckitem-active-arrow-icon-color: dynamic($menucheckitem-active-icon-color);

/**
 * @var {color}
 * Menu CheckItem arrow icon color when disabled
 */
$menucheckitem-disabled-arrow-icon-color: dynamic($menucheckitem-disabled-icon-color);

/**
 * @var {number}
 * Menu CheckItem arrow icon size
 */
$menucheckitem-arrow-icon-size: dynamic($menucheckitem-icon-size);

/**
 * @var {number}
 * Menu CheckItem arrow icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menucheckitem-arrow-icon-size-big: dynamic($menucheckitem-icon-size-big);

/**
 * @var {number}
 * Menu CheckItem arrow icon font-size
 */
$menucheckitem-arrow-icon-font-size: dynamic(null);

/**
 * @var {number}
 * Menu CheckItem arrow icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menucheckitem-arrow-icon-font-size-big: dynamic(null);

/**
 * @var {number/list}
 * Menu CheckItem arrow icon margin
 */
$menucheckitem-arrow-icon-margin: dynamic(null);

/**
 * @var {number/list}
 * Menu CheckItem arrow icon margin in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menucheckitem-arrow-icon-margin-big: dynamic(null);

/**
 * @var {string/list}
 * Menu CheckItem checkbox icon
 */
$menucheckitem-checkbox-icon: dynamic($checkboxfield-checkbox-icon);

/**
 * @var {string/list}
 * Menu CheckItem checkbox icon when checked
 */
$menucheckitem-checked-checkbox-icon: dynamic($checkboxfield-checked-checkbox-icon);

/**
 * @var {color}
 * Menu CheckItem checkbox color
 */
$menucheckitem-checkbox-color: dynamic($menucheckitem-icon-color or $menuitem-icon-color);

/**
 * @var {color}
 * Menu CheckItem checkbox color when active
 */
$menucheckitem-active-checkbox-color: dynamic($menucheckitem-active-icon-color or $menuitem-active-icon-color);

/**
 * @var {color}
 * Menu CheckItem checkbox color when disabled
 */
$menucheckitem-disabled-checkbox-color: dynamic($menucheckitem-disabled-icon-color or $menuitem-disabled-icon-color);

/**
 * @var {number}
 * Menu CheckItem checkbox size
 */
$menucheckitem-checkbox-size: dynamic($checkboxfield-checkbox-size);

/**
 * @var {number}
 * Menu CheckItem checkbox size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menucheckitem-checkbox-size-big: dynamic($checkboxfield-checkbox-size-big);

/**
 * @var {number}
 * Menu CheckItem checkbox font size
 */
$menucheckitem-checkbox-font-size: dynamic(null);

/**
 * @var {number}
 * Menu CheckItem checkbox font size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$menucheckitem-checkbox-font-size-big: dynamic(null);

/**
 * Creates a visual theme for a Menu CheckItem.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {String} [$xtype=menucheckitem] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $color
 * Menu CheckItem text color
 *
 * @param {color} $active-color
 * Menu CheckItem text color when active
 *
 * @param {color} $disabled-color
 * Menu CheckItem text color when disabled
 *
 * @param {color} $background-color
 * Menu CheckItem background-color
 *
 * @param {color} $active-background-color
 * Menu CheckItem background-color when active
 *
 * @param {color} $disabled-background-color
 * Menu CheckItem background-color when disabled
 *
 * @param {string/number} $font-weight
 * Menu CheckItem font-weight
 *
 * @param {number} $font-size
 * Menu CheckItem font-size
 *
 * @param {number} $font-size-big
 * Menu CheckItem font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $font-family
 * Menu CheckItem font-family
 *
 * @param {number} $height
 * Menu CheckItem height
 *
 * @param {number} $height-big
 * Menu CheckItem height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $cursor
 * Menu CheckItem cursor
 *
 * @param {string} $disabled-cursor
 * Menu CheckItem cursor when disabled
 *
 * @param {number} $focused-outline-width
 * Menu item outline-width when focused
 *
 * @param {string} $focused-outline-style
 * Menu item outline-style when focused
 *
 * @param {color} $focused-outline-color
 * Menu item outline-color when focused
 *
 * @param {color} $focused-outline-offset
 * Menu item outline-offset when focused
 *
 * @param {number} $disabled-opacity
 * The opacity of disabled {@link Ext.menu.Item Menu CheckItems}
 *
 * @param {color} $icon-color
 * Menu CheckItem icon color
 *
 * @param {color} $active-icon-color
 * Menu CheckItem icon color when active
 *
 * @param {color} $disabled-icon-color
 * Menu CheckItem icon color when disabled
 *
 * @param {number} $icon-size
 * Menu CheckItem icon size
 *
 * @param {number} $icon-size-big
 * Menu CheckItem icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-font-size
 * Menu CheckItem icon font-size
 *
 * @param {number} $icon-font-size-big
 * Menu CheckItem icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $arrow-icon
 * Menu CheckItem arrow icon
 *
 * @param {color} $arrow-icon-color
 * Menu CheckItem arrow icon color
 *
 * @param {color} $active-arrow-icon-color
 * Menu CheckItem arrow icon color when active
 *
 * @param {color} $disabled-arrow-icon-color
 * Menu CheckItem arrow icon color when disabled
 *
 * @param {number} $arrow-icon-size
 * Menu CheckItem arrow icon size
 *
 * @param {number} $arrow-icon-size-big
 * Menu CheckItem arrow icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $arrow-icon-font-size
 * Menu CheckItem arrow icon font-size
 *
 * @param {number} $arrow-icon-font-size-big
 * Menu CheckItem arrow icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $arrow-icon-margin
 * Menu CheckItem arrow icon margin
 *
 * @param {number/list} $arrow-icon-margin-big
 * Menu CheckItem arrow icon margin in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string/list} $checkbox-icon
 * Menu CheckItem checkbox icon
 *
 * @param {string/list} $checked-checkbox-icon
 * Menu CheckItem checkbox icon when checked
 *
 * @param {color} $checkbox-color
 * Menu CheckItem checkbox color
 *
 * @param {color} $active-checkbox-color
 * Menu CheckItem checkbox color when active
 *
 * @param {color} $disabled-checkbox-color
 * Menu CheckItem checkbox color when disabled
 *
 * @param {number} $checkbox-size
 * Menu CheckItem checkbox size
 *
 * @param {number} $checkbox-size-big
 * Menu CheckItem checkbox size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $checkbox-font-size
 * Menu CheckItem checkbox font size
 *
 * @param {number} $checkbox-font-size-big
 * Menu CheckItem checkbox font size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
@mixin menucheckitem-ui(
    $ui: null,
    $xtype: menucheckitem,
    $color: null,
    $active-color: null,
    $disabled-color: null,
    $background-color: null,
    $active-background-color: null,
    $disabled-background-color: null,
    $font-weight: null,
    $font-size: null,
    $font-size-big: null,
    $font-family: null,
    $height: null,
    $height-big: null,
    $cursor: null,
    $disabled-cursor: null,
    $focused-outline-width: null,
    $focused-outline-style: null,
    $focused-outline-color: null,
    $focused-outline-offset: null,
    $disabled-opacity: null,
    $icon-color: null,
    $active-icon-color: null,
    $disabled-icon-color: null,
    $icon-size: null,
    $icon-size-big: null,
    $icon-font-size: null,
    $icon-font-size-big: null,
    $arrow-icon: null,
    $arrow-icon-color: null,
    $active-arrow-icon-color: null,
    $disabled-arrow-icon-color: null,
    $arrow-icon-size: null,
    $arrow-icon-size-big: null,
    $arrow-icon-font-size: null,
    $arrow-icon-font-size-big: null,
    $arrow-icon-margin: null,
    $arrow-icon-margin-big: null,
    $checkbox-icon: null,
    $checked-checkbox-icon: null,
    $checkbox-color: null,
    $active-checkbox-color: null,
    $disabled-checkbox-color: null,
    $checkbox-size: null,
    $checkbox-size-big: null,
    $checkbox-font-size: null,
    $checkbox-font-size-big: null
) {
    $ui-suffix: ui-suffix($ui);

    $arguments: intersect-arguments(menucheckitem-ui, menuitem-ui);

    @include menuitem-ui($arguments...);

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        .#{$prefix}checkbox-icon-el {
            @include icon(
                $icon: $checkbox-icon,
                $color: $checkbox-color,
                $size: $checkbox-size,
                $size-big: $checkbox-size-big,
                $font-size: $checkbox-font-size,
                $font-size-big: $checkbox-font-size-big
            );
        }

        &.#{$prefix}checked {
            .#{$prefix}checkbox-icon-el {
                @include icon($checked-checkbox-icon);
            }
        }

        &.#{$prefix}active {
            .#{$prefix}checkbox-icon-el {
                color: $active-checkbox-color;
            }
        }

        &.#{$prefix}disabled {
            .#{$prefix}checkbox-icon-el {
                color: $disabled-checkbox-color;
            }
        }
    }
}